import echarts from 'echarts'
import $ from 'jQuery'
import testApi from '../../../../api/testApi'
import request from '@/utils/request'

export default {
  name: 'businessScreen',
  data() {
    return {
      scrollValue: '开',
      intervalCpu: '',
      intervalMemory: '',
      intervalDisk: '',
      intervalBandWidth: '',
      intervalDispatch: '',
      // 第一个card
      usageDataList: [],
      usageDataList1: [], // 没用
      usageDataList2: [],
      // 第二个card
      chartDialogVisible: false,
      chooseBtnFlag: false,
      recentExpense: [],
      shortTermExpense: [],
      longTermExpense: [],
      mediumTermExpense: [],
      chartShortOption: '',
      chartMediumOption: '',
      chartLongOption: '',
      expenseLists: {},
      expenseInDialog: {}

    }
  },
  created() {
  },
  beforeDestroy() {
    if (this.intervalCpu !== '') {
      clearInterval(this.intervalCpu)
    }
    if (this.intervalMemory !== '') {
      clearInterval(this.intervalMemory)
    }
    if (this.intervalBandWidth !== '') {
      clearInterval(this.intervalBandWidth)
    }
    if (this.intervalDisk !== '') {
      clearInterval(this.intervalDisk)
    }
    if (this.intervalDispatch !== '') {
      clearInterval(this.intervalDispatch)
    }
  },
  async mounted() {
    await this.getExpenseLists()
    await this.getUsageHostInfo()
    await this.getUsageHostInfoNew()
    this.scrollChange()
    await this.upDateResults()
    console.log(this.usageDataList)
  },
  methods: {
    upDateResults() {
      const self = this
      this.getCharts()
      this.getExpenseLists()
      this.chooseBtnFlag = false
      setTimeout(function() {
        self.chooseBtnFlag = true
      }, 10000)
    },
    async getUsageHostInfoNew() {
      request({
        url: `/cloud/jcce/v1.0/kt2/kt2Overview`,
        method: 'get'
      }).then((res) => {
        console.log(res.data.data)
        this.usageDataList2 = res.data.data
        // this.usageDataList = res.data
      }).catch(() => {

      })
    },
    async getUsageHostInfo() {
      await testApi.getUsageHostInfo().then((res) => {
        this.usageDataList = res.data
      }).catch(() => {
        // '/static/hostPerformance/阿里云.png'  cloudProvider:"TENCENT"
        this.usageDataList = [
          {
            id: 100,
            label: '阿里云',
            icon: '/static/hostPerformance/阿里云.png',
            showAll: true,
            showCpuDetail: false,
            showMemoryDetail: false,
            showBandWidthDetail: false,
            showDiskDetail: false,
            cpuUsage: '2',
            cpuTotal: '10',
            instanceUsage: '2', //实例使用数量
            instanceTotal: '100',//实例配额
            dataDiskUsage: '2',// 数据盘配额（盘数）
            dataDiskTotal: '100',
            diskCapacityUsage: '100',// 数据盘容量
            diskCapacityTotal: '1000GB',
            vpcUsage: '2',
            vpcTotal: '100',
            memoryUsage: '4GB',
            memoryTotal: '116GB',
            diskUsage: '1TB',
            diskTotal: '10TB',
            bandWidthUsage: '2Mbps',
            bandWidthTotal: '10Mbps',
            cpuList: [
              { num: 2, detail: '2.5GHz' },
              { num: 4, detail: '3GHz' },
              { num: 4, detail: '3.6GHz' }
            ],
            memoryList: [
              { num: 1, detail: '64GB RAM' },
              { num: 10, detail: '2GB RAM' },
              { num: 4, detail: '8GB RAM' }
            ],
            diskList: [
              { num: '8TB', detail: 'SSD' },
              { num: '2TB', detail: 'HDD' }
            ],
            instanceTypes: [
              {
                arch: 'X86_64',
                cpuCoreCount: 8,
                instanceType: 'ecs.n1.tiny',
                instanceTypeFamily: 'ecs.n1',
                instanceTypeName: 'ecs.n1.tiny',
                memorySize: 1.0,
                postpaidHourPrice: '0.15',
                processorModel: 'Intel ',
                gpuAmount: 0,
                gpuMemorySize: 0,
                gpuSpec: '',
                amount: 2
              },
              {
                arch: 'X86_64',
                cpuCoreCount: 8,
                instanceType: 'ecs.n1.small',
                instanceTypeFamily: 'ecs.n1',
                instanceTypeName: 'ecs.n1.small',
                memorySize: 2.0,
                postpaidHourPrice: '0.28',
                processorModel: '',
                amount: 3
              }
            ]
          },
          {
            id: 0,
            label: '腾讯云',
            icon: '/static/hostPerformance/腾讯云.png',
            cpuUsage: '4',
            cpuTotal: '10',
            instanceUsage: '1', //实例使用数量
            instanceTotal: '100',//实例配额
            dataDiskUsage: '1',// 数据盘配额（盘数）
            dataDiskTotal: '100',
            diskCapacityUsage: '0',// 数据盘容量
            diskCapacityTotal: '1000GB',
            vpcUsage: '1',
            vpcTotal: '100',
            memoryUsage: '4GB',
            memoryTotal: '116GB',
            diskUsage: '1TB',
            diskTotal: '10TB',
            bandWidthUsage: '2Mbps',
            bandWidthTotal: '10Mbps',
            showAll: true,
            showCpuDetail: false,
            showMemoryDetail: false,
            showBandWidthDetail: false,
            showDiskDetail: false,
            cpuList: [
              { num: 2, detail: '2.5GHz' },
              { num: 4, detail: '3GHz' },
              { num: 4, detail: '3.6GHz' }
            ],
            memoryList: [
              { num: 1, detail: '64GB RAM' },
              { num: 10, detail: '2GB RAM' },
              { num: 4, detail: '8GB RAM' }
            ],
            diskList: [
              { num: '8TB', detail: 'SSD' },
              { num: '2TB', detail: 'HDD' }
            ],
            instanceTypes: [
              {
                arch: 'X86_64',
                cpuCoreCount: 8,
                instanceType: 'ecs.n1.large',
                instanceTypeFamily: 'ecs.n1',
                instanceTypeName: 'ecs.n1.large',
                memorySize: 8.0,
                postpaidHourPrice: '1.35',
                processorModel: '',
                gpuAmount: 1.0,
                gpuMemorySize: 8,
                gpuSpec: 'NVIDIA P4',
                amount: 2
              },
              {
                arch: 'X86_64',
                cpuCoreCount: 8,
                instanceType: 'ecs.n1.xlarge',
                instanceTypeFamily: 'ecs.n1',
                instanceTypeName: 'ecs.n1.xlarge',
                memorySize: 16.0,
                postpaidHourPrice: '2.69',
                processorModel: '',
                amount: 3
              }
            ]
          },
          {
            id: 33,
            label: '华为云',
            icon: '/static/hostPerformance/华为云.png',
            cpuUsage: '4',
            cpuTotal: '10',
            instanceUsage: '1', //实例使用数量
            instanceTotal: '100',//实例配额
            dataDiskUsage: '1',// 数据盘配额（盘数）
            dataDiskTotal: '100',
            diskCapacityUsage: '50',// 数据盘容量
            diskCapacityTotal: '1000GB',
            vpcUsage: '1',
            vpcTotal: '100',
            memoryUsage: '4GB',
            memoryTotal: '116GB',
            diskUsage: '1TB',
            diskTotal: '10TB',
            bandWidthUsage: '2Mbps',
            bandWidthTotal: '10Mbps',
            showAll: true,
            showCpuDetail: false,
            showMemoryDetail: false,
            showBandWidthDetail: false,
            showDiskDetail: false,
            cpuList: [
              { num: 2, detail: '2.5GHz' },
              { num: 4, detail: '3GHz' },
              { num: 4, detail: '3.6GHz' }
            ],
            memoryList: [
              { num: 1, detail: '64GB RAM' },
              { num: 10, detail: '2GB RAM' },
              { num: 4, detail: '8GB RAM' }
            ],
            diskList: [
              { num: '8TB', detail: 'SSD' },
              { num: '2TB', detail: 'HDD' }
            ],
            instanceTypes: [
              {
                arch: 'X86_64',
                cpuCoreCount: 8,
                instanceType: 'S2.2XLARGE32',
                instanceTypeFamily: 'S2',
                instanceTypeName: 'pi1.2xlarge.4',
                memorySize: 32.0,
                postpaidHourPrice: '3.74',
                processorModel: 'Intel Xeon E5-2680 v4',
                gpuAmount: 1.0,
                gpuMemorySize: 8,
                gpuSpec: 'NVIDIA ',
                amount: 2
              },
              {
                arch: 'X86_64',
                cpuCoreCount: 4,
                instanceType: 'S5.LARGE8',
                instanceTypeFamily: 'gpu',
                instanceTypeName: 'S5',
                memorySize: 8.0,
                postpaidHourPrice: '0.66',
                processorModel: 'Intel Xeon Cascade Lake 8255C/Intel Xeon Cooper Lake',
                amount: 3
              }
            ]
          },
          {
            id: 3336,
            label: '百度云',
            icon: '/static/hostPerformance/百度云.png',
            cpuUsage: '4',
            cpuTotal: '10',
            instanceUsage: '0', //实例使用数量
            instanceTotal: '100',//实例配额
            dataDiskUsage: '0',// 数据盘配额（盘数）
            dataDiskTotal: '100',
            diskCapacityUsage: '0',// 数据盘容量
            diskCapacityTotal: '1000GB',
            vpcUsage: '0',
            vpcTotal: '100',
            memoryUsage: '4GB',
            memoryTotal: '116GB',
            diskUsage: '1TB',
            diskTotal: '10TB',
            bandWidthUsage: '2Mbps',
            bandWidthTotal: '10Mbps',
            showAll: true,
            showCpuDetail: false,
            showMemoryDetail: false,
            showBandWidthDetail: false,
            showDiskDetail: false,
            cpuList: [
              { num: 2, detail: '2.5GHz' },
              { num: 4, detail: '3GHz' },
              { num: 4, detail: '3.6GHz' }
            ],
            memoryList: [
              { num: 1, detail: '64GB RAM' },
              { num: 10, detail: '2GB RAM' },
              { num: 4, detail: '8GB RAM' }
            ],
            diskList: [
              { num: '8TB', detail: 'SSD' },
              { num: '2TB', detail: 'HDD' }
            ],
            instanceTypes: [
              {
                arch: 'X86_64',
                cpuCoreCount: 32,
                instanceType: 'I3.8XLARGE128',
                instanceTypeFamily: 'I3',
                instanceTypeName: 'I3.8XLARGE128',
                memorySize: 128.0,
                postpaidHourPrice: '21.61',
                processorModel: 'Intel Xeon Skylake 6133',
                gpuAmount: 1.0,
                gpuMemorySize: 8,
                gpuSpec: 'NVIDIA',
                amount: 4
              },
              {
                arch: 'X86_64',
                cpuCoreCount: 32,
                instanceType: 'IT5.8XLARGE128',
                instanceTypeFamily: 'IT5',
                instanceTypeName: 'IT5.8XLARGE128',
                memorySize: 128.0,
                postpaidHourPrice: '10.16',
                processorModel: 'Intel E5-2697V4 2.3GHz',
                amount: 3
              }
            ]
          },
          {
            id: 3335,
            label: '联通云',
            icon: '/static/hostPerformance/联通云.png',
            cpuUsage: '4',
            cpuTotal: '10',
            instanceUsage: '0', //实例使用数量
            instanceTotal: '100',//实例配额
            dataDiskUsage: '0',// 数据盘配额（盘数）
            dataDiskTotal: '100',
            diskCapacityUsage: '0',// 数据盘容量
            diskCapacityTotal: '1000GB',
            vpcUsage: '0',
            vpcTotal: '100',
            memoryUsage: '4GB',
            memoryTotal: '116GB',
            diskUsage: '1TB',
            diskTotal: '10TB',
            bandWidthUsage: '2Mbps',
            bandWidthTotal: '10Mbps',
            showAll: true,
            showCpuDetail: false,
            showMemoryDetail: false,
            showBandWidthDetail: false,
            showDiskDetail: false,
            cpuList: [
              { num: 2, detail: '2.5GHz' },
              { num: 4, detail: '3GHz' },
              { num: 4, detail: '3.6GHz' }
            ],
            memoryList: [
              { num: 1, detail: '64GB RAM' },
              { num: 10, detail: '2GB RAM' },
              { num: 4, detail: '8GB RAM' }
            ],
            diskList: [
              { num: '8TB', detail: 'SSD' },
              { num: '2TB', detail: 'HDD' }
            ],
            instanceTypes: [
              {
                arch: 'X86_64',
                cpuCoreCount: 8,
                instanceType: 'pi1.2xlarge.4',
                instanceTypeFamily: 'gpu',
                instanceTypeName: 'pi1.2xlarge.4',
                memorySize: 32.0,
                postpaidHourPrice: '6.66',
                processorModel: 'Intel E5-2697V4 2.3GHz',
                gpuAmount: 1.0,
                gpuMemorySize: 8,
                gpuSpec: 'NVIDIA P4',
                amount: 2
              }

            ]
          }
        ]
      })
    },
    async getExpenseLists() {
      await testApi.getExpenseLists().then((res) => {
        this.expenseLists = res.data
        this.expenseInDialog = this.expenseLists.shortTermExpenseDetail
      }).catch(() => {
        this.expenseLists = {
          recentExpenseDetail: {
            totalExpense: '200',
            objectStorage: { storageCapacity: '100GB', storageDuration: 720, unitPrice: '$0.02/GB/h', cost: '$14.40' },
            dataTransfer: { transferCapacity: '500GB', unitPrice: '$0.10/GB', cost: '$50.00' },
            databaseService: { databaseType: 'MySQL', storageCapacity: '50GB', duration: 720, unitPrice: '$0.02/GB/h', cost: '$28.80' },
            loadBalancer: { instancesNum: 2, duration: 720, unitPrice: '$0.02', cost: '$28.80' }
          },
          shortTermExpenseDetail: {
            totalExpense: '122',
            objectStorage: { storageCapacity: '100GB', storageDuration: 720, unitPrice: '$0.02/GB/h', cost: '$14.40' },
            dataTransfer: { transferCapacity: '500GB', unitPrice: '$0.10/GB', cost: '$50.00' },
            databaseService: { databaseType: 'MySQL', storageCapacity: '50GB', duration: 720, unitPrice: '$0.02/GB/h', cost: '$28.80' },
            loadBalancer: { instancesNum: 2, duration: 720, unitPrice: '$0.02', cost: '$28.80' }
          },
          mediumTermExpenseDetail: {
            totalExpense: '158',
            objectStorage: { storageCapacity: '100GB', storageDuration: 720, unitPrice: '$0.02/GB/h', cost: '$14.40' },
            dataTransfer: { transferCapacity: '500GB', unitPrice: '$0.10/GB', cost: '$50.00' },
            databaseService: { databaseType: 'MySQL', storageCapacity: '50GB', duration: 720, unitPrice: '$0.02/GB/h', cost: '$28.80' },
            loadBalancer: { instancesNum: 2, duration: 720, unitPrice: '$0.02', cost: '$28.80' }
          },
          longTermExpenseDetail: {
            totalExpense: '158',
            objectStorage: { storageCapacity: '100GB', storageDuration: 720, unitPrice: '$0.02/GB/h', cost: '$14.40' },
            dataTransfer: { transferCapacity: '500GB', unitPrice: '$0.10/GB', cost: '$50.00' },
            databaseService: { databaseType: 'MySQL', storageCapacity: '50GB', duration: 720, unitPrice: '$0.02/GB/h', cost: '$28.80' },
            loadBalancer: { instancesNum: 2, duration: 720, unitPrice: '$0.02', cost: '$28.80' }
          }
        }
        this.expenseLists.shortTermExpenseDetail.totalExpense = 75
        this.expenseLists.longTermExpenseDetail.totalExpense = 129
        this.expenseLists.mediumTermExpenseDetail.totalExpense = 156

        this.expenseInDialog = this.expenseLists.shortTermExpenseDetail
      })
    },
    scrollChange() {
      const self = this
      if (self.scrollValue === '开') {
        const doscrollDispatch = function() {
          const $parent = $('.card3-box')
          const $first = $parent.find('div:first')
          console.log($first)
          const width = $first.width()
          $first.animate({
            width: 0
          }, 500, function() {
            $first.css('width', width).appendTo($parent)
          })
        }
        this.intervalDispatch = setInterval(function() { doscrollDispatch() }, 5000)
        const doscrollCpu = function() {
          const $parent = $('.tableInnerCpu')
          const $first = $parent.find('div:first')
          console.log($first)
          const height = $first.height()
          $first.animate({
            height: 0
          }, 500, function() {
            $first.css('height', height).appendTo($parent)
          })
        }

        const doscrollMemory = function() {
          const $parent = $('.tableInnerMemory')
          const $first = $parent.find('div:first')
          const height = $first.height()
          $first.animate({
            height: 0
          }, 500, function() {
            $first.css('height', height).appendTo($parent)
          })
        }
        const doscrollBandWidth = function() {
          const $parent = $('.tableInnerBandWidth')
          const $first = $parent.find('div:first')
          const height = $first.height()
          $first.animate({
            height: 0
          }, 500, function() {
            $first.css('height', height).appendTo($parent)
          })
        }
        const doscrollDisk = function() {
          const $parent = $('.tableInnerDisk')
          const $first = $parent.find('div:first')
          const height = $first.height()
          $first.animate({
            height: 0
          }, 500, function() {
            $first.css('height', height).appendTo($parent)
          })
        }
        console.log(this.intervalCpu)
        console.log(this.intervalMemory)

        self.intervalCpu = setInterval(function() { doscrollCpu() }, 5000)
        self.intervalMemory = setInterval(function() { doscrollMemory() }, 5000)
        self.intervalBandWidth = setInterval(function() { doscrollBandWidth() }, 5000)
        self.intervalDisk = setInterval(function() { doscrollDisk() }, 5000)
      } else if (this.scrollValue === '关') {
        if (this.intervalCpu !== '') {
          clearInterval(self.intervalCpu)
        }
        if (this.intervalMemory !== '') {
          clearInterval(self.intervalMemory)
        }
        if (this.intervalBandWidth !== '') {
          clearInterval(self.intervalBandWidth)
        }
        if (this.intervalDisk !== '') {
          clearInterval(self.intervalDisk)
        }
        if (this.intervalDispatch !== '') {
          clearInterval(self.intervalDispatch)
        }
      }
    },

    makeData() {
      const base = +new Date()
      const oneDay = 24 * 3600 * 1000
      // const data = [[base, Math.random() * 300]]
      const data = []
      for (let i = 1; i < 100; i++) {
        const now = new Date((base + i * oneDay))
        data.push([+now, Math.abs(Math.random() * 300).toFixed(2)])
        // data.push([+now, 100])
      }
      console.log(data)
      return data
    },
    getChartsData() {
      this.recentExpense = this.makeData()
      this.shortTermExpense = this.makeData()
      this.mediumTermExpense = this.makeData()
      this.longTermExpense = this.makeData()
    },
    getCharts() {
      this.getChartsData()
      const chart_real = echarts.init(document.getElementById('chart_real'), 'dark')
      const chartRealOption = {
        tooltip: {trigger: 'axis'},
        title: {left: 'center', text: ''},
        backgroundColor: 'transparent',
        // toolbox: {feature: {dataZoom: {yAxisIndex: 'none'}, restore: {}, saveAsImage: {}}},
        xAxis: {type: 'time', boundaryGap: false},
        yAxis: {type: 'value', boundaryGap: [0, '100%']},
        dataZoom: [{type: 'inside', start: 0, end: 100}, {type: 'inside', start: 0, end: 100}],
        series: [{
          name: '费用(元)', type: 'line', smooth: true, symbol: 'none', areaStyle: {},
          data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
          itemStyle: {color: '#6495ED'}
        }]
      }
      chart_real.setOption(chartRealOption)



      const now = new Date()
      // 创建一个数组来存储每个整点的时间
      const timeList = []
      // 循环获取当前时间之后的24个整点时间
      for (let i = 1; i <= 24; i++) {
        const nextHour = new Date(now.getTime() + i * 60 * 60 * 1000)
        // 获取整点时间的小时数并转换为字符串
        const hourString = nextHour.getHours().toString()

        // 将小时字符串添加到数组中
        timeList.push(hourString)
        // 将整点时间添加到数组中
      }

      const short_term_chart = echarts.init(document.getElementById('short_term_chart'), 'dark')
      short_term_chart.setOption(this.getChart1(timeList))

      const medium_term_chart = echarts.init(document.getElementById('medium_term_chart'), 'dark')
      medium_term_chart.setOption(this.getChart2(timeList))

      const long_term_chart = echarts.init(document.getElementById('long_term_chart'), 'dark')
      long_term_chart.setOption(this.getChart3(timeList))
    },
    openDetailDialog(termType) {
      this.chartDialogVisible = true

      this.$nextTick(() => {
        const dialogChart = echarts.init(document.getElementById('chartInDialog'), 'dark')
        let chartOption
        if (termType === `shortTerm`) {
          chartOption = this.chartShortOption
          this.expenseInDialog = this.expenseLists.shortTermExpenseDetail
        } else if (termType === `mediumTerm`) {
          chartOption = this.chartMediumOption
          this.expenseInDialog = this.expenseLists.mediumTermExpenseDetail
        } else if (termType === `longTerm`) {
          chartOption = this.chartLongOption
          this.expenseInDialog = this.expenseLists.longTermExpenseDetail
        }
        dialogChart.setOption(chartOption)
      })
    },
    chooseSet(termType) {
      if (termType === `shortTerm`) {
        const tempData = this.usageDataList
        this.usageDataList = this.usageDataList1
        this.usageDataList1 = tempData
      } else if (termType === `mediumTerm`) {
        const tempData = this.usageDataList
        this.usageDataList = this.usageDataList1
        this.usageDataList1 = tempData
      } else if (termType === `longTerm`) {
        const tempData = this.usageDataList
        this.usageDataList = this.usageDataList1
        this.usageDataList1 = tempData
      }
      this.upDateResults()
    },
    showInstanceTypeDetail(item, typeDetail) {
      for (let i = 0; i < this.usageDataList.length; i++) {
        if (this.usageDataList[i].id === item.id) {
          this.usageDataList[i].showAll = false
          this.usageDataList[i].showInstanceTypeDetail = true
          this.usageDataList[i].detail = typeDetail
        }
      }
    },
    quitDetail(item) {
      for (let i = 0; i < this.usageDataList.length; i++) {
        if (this.usageDataList[i].id === item.id) {
          this.usageDataList[i].showAll = true
          this.usageDataList[i].showInstanceTypeDetail = false
        }
      }
    },
    fullScreen() {
      const element = document.getElementById('entirety')
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    getDateAndData(arr) {
      let begin = Date.parse(new Date())
      let result = []
      for (let i = 0; i < arr.length; i++) {
        result.push([(begin + i * 1000 * 3600 * 24), arr[i]])
      }
      return result
    },
    jumpConsult() {
      this.$router.push({ name: 'consult' })
    },
    jumpResourcePrediction() {
      this.$router.push({ name: 'resourcePrediction' })
    },
    getChart1(timeList) {
      return {
        tooltip: {
          trigger: 'axis',
          formatter: '{a}：{c}ms'
        }, grid: {
          left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
        },
        backgroundColor: 'transparent',
        xAxis: {
          name: '时间(时)',
          type: 'category', boundaryGap: false, data: timeList
        }, yAxis: {
          name: '时延(ms)',
          type: 'value'
        }, series: [{
          name: '延迟',
          type: 'line',
          data: [123, 456, 789, 234, 567, 890, 345, 678, 901, 234, 567, 890, 123, 456, 789, 234, 567, 890, 345, 678, 901, 234, 567, 890],
          itemStyle: {
            color: '#FF0000' // 设置颜色为红色
          }
        }]
      }
      return option;
    },
    getChart2(timeList) {
      return {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%', right: '14%', bottom: '13%', top: '15%', containLabel: true
        },
        backgroundColor: 'transparent', xAxis: {
          boundaryGap: true, // 设置为 true
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }, yAxis: {
          name: '成本(元/万元)', type: 'value'
        }, series: [{
          name: '成本', type: 'bar', data: [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920],
          itemStyle: {
            color: '#6495ED'
          }
        }, {
          name: '短期套餐费用(元)',
          type: 'line',
          smooth: true,
          symbol: 'none',
          // data: this.shortTermExpense,
          data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
          itemStyle: {
            color: '#f5b000'
          }
        }]
      };
    },
    getChart3(timeList) {
      return {
        tooltip: {
          trigger: 'axis',
          formatter: '{a}：{c}ms'
        }, grid: {
          left: '3%', right: '14%', bottom: '13%', top: '15%', containLabel: true
        },
        backgroundColor: 'transparent',
        xAxis: {
          name: '时间(时)',
          type: 'category', boundaryGap: false, data: timeList
        }, yAxis: {
          name: '能耗(w)',
          type: 'value'
        }, series: [{
          name: '能耗',
          type: 'line',
          data: [523, 847, 192, 678, 345, 910, 234, 789, 456, 123, 567, 890, 432, 876, 321, 654, 987, 210, 543, 876, 345, 678, 901, 234],
          itemStyle: {
            color: '#f5b000'
          }
        }]
      }
    },
  }
}
